J6:[["$","div",null,{"className":"header_header____5Dq","children":[["$","@8",null,{"mainStyles":"page_main__moE7a pt-4","categoryList":["JAVASCRIPT","React","TypeScript","渲染优化","运维"],"title":"React 函数组件使用 hook 优化性能的几个方法"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","xmlnsXlink":"http://www.w3.org/1999/xlink","viewBox":"0 24 150 28","preserveAspectRatio":"none","shapeRendering":"auto","className":"header_headerBgIcon__7ACIv","children":[["$","defs",null,{"children":["$","path",null,{"id":"gentle-wave","d":"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"}]}],["$","g",null,{"children":[["$","use",null,{"xlinkHref":"#gentle-wave","x":"48","y":"0","fill":"rgba(255,255,255,0.7)"}],["$","use",null,{"xlinkHref":"#gentle-wave","x":"48","y":"3","fill":"rgba(255,255,255,0.5)"}],["$","use",null,{"xlinkHref":"#gentle-wave","x":"48","y":"5","fill":"rgba(255,255,255,0.3)"}],["$","use",null,{"xlinkHref":"#gentle-wave","x":"48","y":"7","fill":"#fff"}]]}]]}]]}],["$","div",null,{"className":"page_main__moE7a","children":["$","@9",null,{"markdown":"---\ntitle: React 函数组件使用 hook 优化性能的几个方法\ndate: 2020-04-02 22:22:43\ntags: [React, 性能优化]\ncategories: React\n---\n\n## 概述\n\n当函数组件使用 `hoos` 时，每次状态更改，内部函数都会被重新创建。保持组件足够小，是优化性能的一方面。除此之外，我们可以让 `React` 知道。每次更改，对应需要重新创建的部分。从而更细粒度的函数的重新创建。但必须谨慎使用，因为没有重现创建的内部函数，函数内部的字段也不会更新。\n\n## 使用 useEffect、useLayoutEffect\n\n`useEffect` 第二个参数为依赖的字段数组，变动才执行 `useEffect` 方法。\n\n***`useLayoutEffect` 基本和 `useEffect`一致，只是在 DOM 变化后同步触发，可能阻止视觉更新***\n\n```JavaScript\nimport React, { useState, useEffect } from 'react'\n\nconst [count, setCount] = useState(0)\nconst [text, updateText] = useState('')\n\nuseEffect(() => {\n console.log(count) // 仅当 count 更改时，才会执行方法\n}, [count])\n\nreturn (\n

You clicked {count} times

\n updateText(e.target.value)} />\n \n

\n)\n```\n\n## 使用 useCallback、useMemo\n\n`useCallback` 和 `useEffect` 类似。第一个参数为回调，第二个参数为依赖的字段数组。不同的是，这会返回一个函数。在需要的时候调用。\n\n\n```JavaScript\nimport React, { useState, useCallback } from 'react'\n\nconst [count, setCount] = useState(0)\nconst [text, updateText] = useState('')\n\nconst handleClick = useCallback(() => {\n console.log(count) // updateText 是，并不会重新创建此方法。只有在更新 setCount 是才会\n}, [count])\n\nreturn (\n

\n setCount(e.target.value)} />\n updateText(e.target.value)} />\n \n

\n)\n```\n\n### useCallback vs useMemo\n\n> `useCallback(fn, inputs)` 等价于 `useMemo(() => fn, inputs)`\n\n但是 `memoized` 的内容不一样。`useCallback` `memoized` 第一个回调函数，`useMemo` `memoized` 第一个回调函数执行后的值.\n\n## 使用 React.memo\n\n`React.memo` 类似于 `React.PureComponent`，只是用于组件。有两个参数。第一个参数为要传入的组件，第二个参数是一个回调函数。用于控制是否重新渲染。\n```JavaScript\nfunction MyComponent(props) {\n /* render using props */\n}\nfunction areEqual(prevProps, nextProps) {\n /*\n return true if passing nextProps to render would return\n the same result as passing prevProps to render,\n otherwise return false\n */\n}\nexport default React.memo(MyComponent, areEqual);\n```"}]}]]